<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ToDoList</title>
		<script src="js/jquery.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			
			body {
				font-size: 16px;
				background: #CDCDCD;
			}
			
			header {
				height: 50px;
				background-color: #323232;
			}
			
			section {
				width: 600px;
				padding: 0 10px;
				margin: 0 auto;
			}
			
			label {
				float: left;
				width: 100px;
				line-height: 50px;
				color: #DDD;
				font-size: 24px;
				cursor: pointer;
			}
			
			header input {
				float: right;
				width: 60%;
				height: 24px;
				margin-top: 13px;
				text-indent: 10px;
				border-radius: 5px;
				box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
				border: none;
				outline: none;
			}
			
			h2 {
				position: relative;
				margin: 20px 0;
			}
			
			h2>span {
				position: absolute;
				top: 6px;
				right: 5px;
				display: inline-block;
				padding: 0 5px;
				height: 20px;
				border-radius: 20px;
				background: #E6E6FA;
				line-height: 20px;
				text-align: center;
				color: #666;
				font-size: 14px;
			}
			
			ol,
			ul {
				padding: 0;
				list-style: none;
			}
			
			li input {
				position: absolute;
				top: 5px;
				left: 10px;
				width: 22px;
				height: 22px;
				cursor: pointer;
			}
			
			li {
				height: 32px;
				line-height: 32px;
				background: #fff;
				position: relative;
				margin-bottom: 10px;
				padding: 0 45px;
				border-radius: 3px;
				border-left: 5px solid #629A9C;
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
			}
			
			ol li {
				cursor: move;
			}
			
			ul li {
				border-left: 5px solid #999;
				opacity: 0.5;
			}
			
			li a {
				position: absolute;
				top: 3px;
				right: 5px;
				display: inline-block;
				width: 14px;
				height: 14px;
				border-radius: 14px;
				border: 6px double #FFF;
				background: #CCC;
				line-height: 14px;
				text-align: center;
				color: #FFF;
				font-weight: bold;
				font-size: 14px;
				cursor: pointer;
			}
			
			footer {
				color: #666;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header>
			<section>
				<label for="title">ToDoList</label>
				<input type="text" name="title" id="title" placeholder="添加ToDoList" />
			</section>
		</header>
		<section>
			<h2>正在进行<span id="todocount"></span></h2>
			<ol id="todolist">
				
			</ol>
			<h2>已经完成<span id="donecount"></span></h2>
			<ul id="donelist">
				
			</ul>
		</section>
		<footer>
			Copyright © 2014 todolist.cn
		</footer>
		
		<script>
			$(function() {
				//存储数据的格式  [{title:"xxx",done:false}] 
				//提前调用load(),打开页面时就渲染加载了页面
				load();
				//1.按下回车，把完整数据存储到本地存储
				$('#title').on('keydown',function(e) {
					if(e.keyCode === 13) {
						if($(this).val() === "") {
							alert("请输入内容!");
						}else {
							//先读取本地存储的原来数据
							var local = getDate();
							//把local数组更新数据，把新数据追加给local数组
							local.push({title:$(this).val(),done:false});
							//把数组保存到本地存储
							saveDate(local);
							//2.todolist本地存储数据渲染加载到页面（按下回车时加载）
							load();
							//按下回车后清空文本框
							$(this).val("");
						}
					}
				});
				//3.删除操作
				$('ol,ul').on('click','a',function() {
					//先获取本地存储
					var data = getDate();
					//修改数据
					var index = $(this).attr('id');
					//splice()方法是在数组中删除对应的元素，splice(从当前位置删，删除几个)
					data.splice(index,1);
					//保存到本地存储
					saveDate(data);
					//重新渲染页面
					load();
				});
				//4.正在进行和已经完成的选项操作
				$("ol,ul").on("click","input",function() {
					//4.1先获取本地存储数据
					var data = getDate();
					//4.2修改数据
					//(获取input的索引，因为input和a是兄弟关系，获取a的索引就行了)
					var index = $(this).siblings("a").attr("id");
					//(通过索引选择数组对应的数据的done属性，修改为复选框的选定状态)
					data[index].done = $(this).prop("checked");
					//4.3保存到本地存储
					saveDate(data);
					//4.4重新渲染页面
					load();
				});
				//读取本地存储数据  函数
				function getDate() {
					var data = localStorage.getItem('todolist');
					
					if(data != null) {
						//本地存储是字符串格式，要转化成对象格式
						return JSON.parse(data);
					}else {
						return [];
					}
				}
				//保存本地存储数据
				function saveDate(data) {
					//JSON.stringify(data) 将对象转换成字符串格式
					localStorage.setItem('todolist',JSON.stringify(data));
				}
				//渲染加载页面
				function load() {
					//读取本地存储数据
					var data = getDate();
					//遍历之前先清空原来ol,ul里的元素内容，防止重新添加
					$('ol,ul').empty();
					
					var donecount = 0;  //统计完成的个数
					var todocount = 0;  //统计未完成的个数
					
					//遍历读取的数据
					$.each(data,function(i,n) {
						if(n.done) {
							//如果当前的数据的done属性是true，就把数据放入 ul中
							     //按照数据的个数创建li  ( id="+i+" 设置 a 的索引)
							$('ul').prepend("<li><input type='checkbox' checked='checked'><p>"+n.title+"</p><a href='javascript:;' id="+i+"></a></li>");
							donecount++;
						}else{
							//是false就放到ol中
							$('ol').prepend("<li><input type='checkbox'><p>"+n.title+"</p><a href='javascript:;' id="+i+"></a></li>");
							todocount++;
						}
					});
					//把计数器添加到span中
					$("#todocount").text(todocount);
					$("#donecount").text(donecount);
				}
			});
		</script>
	</body>

</html>